<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    @include('common-css')
    <style>

        .input_box {
            width: 100%;
            height: 40px;
            margin-top: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .input_label {
            width: 120px;
            box-sizing: border-box;
        }

        .feedback-table {
            margin-top: 15px;
        }

        .status-tag {
            color: #1890ff;
            border: 1px solid #91d5ff;
            border-radius: 3px;
            background: #e6f7ff;
            font-size: 12px;
            padding: 2px 3px;
        }

        .ant-table-tbody > tr > td, .ant-table-thead > tr > th {
            vertical-align: middle;
            line-height: 25px;
        }

        .search_box {
            width: 1000px;
        }

        .search_box input {
            width: 300px;
        }

        .search_box button {
            margin-left: 20px;
        }

        .search_box .ant-select {
            margin-left: 20px;
        }

        .edit-reviewer-table {
            width: 100%;
            line-height: 25px;
        }

        .edit-reviewer-table td {
            padding: 5px;
        }

        .delete-btn-a {
            color: #f5222d
        }
    </style>
</head>
<body>

<div id="app"></div>

<script id="appTemplate" type="x-template">
    <a-locale-provider :locale="antdLocale">
        <div class="container">

            @include('admin.header-tpl')

            <main>
                <div class="common_container">

                    @include('admin.aside-tpl')

                    <div class="common_content admin_common_content">

                        <div style="display: flex; position: relative; margin-top: 10px; align-items: center;">

                        <span>

                            <label style="margin-right: 20px;">状态</label>

                            <a-radio-group v-model="feedbackStatus">
                                <a-radio-button value="">不限(@{{ countFeedbacksByStatus('') }})</a-radio-button>
                                <a-radio-button value="未处理">未处理(@{{ countFeedbacksByStatus('未处理') }})</a-radio-button>
                                <a-radio-button value="已处理">已处理(@{{ countFeedbacksByStatus('已处理') }})</a-radio-button>
                            </a-radio-group>

                        </span>

                            <span style="flex: 1;"></span>

                            <a-input style="width: 300px;" placeholder="搜索" v-model="searchKeyword"/>
                            <a-icon v-if="searchKeyword"
                                    style="position: absolute; top: 8px; right: 8px; color: #aaa; cursor: pointer;"
                                    type="cross"
                                    @click="searchKeyword = ''"/>
                        </div>

                        <a-table class="feedback-table"
                                 rowKey="id"
                                 size="small"
                                 :columns="feedbackTableColumns"
                                 :dataSource="filteredFeedbacks"
                                 :loading="loadingPageData"
                                 :pagination="{pageSize: 10000, hideOnSinglePage: true, position: 'both', showTotal: total => `共 ${total} 项`}">

                            <span slot="submitter" slot-scope="text, record">
                                @{{ record.submitter.name }} / @{{ record.submitter.prof_title }}<br/>
                                @{{ record.submitter.tel }}<br/>
                                @{{ record.submitter.work_org_name }}
                            </span>

                            <span slot="remark" size="large" slot-scope="text, record">
                                <a-textarea v-model='record.remark' :autosize="{minRows: 3, maxRows: 8}"
                                             @focus="handleFeedbackRemarkFocus(record)" @blur="handleFeedbackRemarkBlur(record)"/>
                            </span>

                            <span slot="operations" slot-scope="text, record">
                                <template v-if="record.status == '未处理'">
                                    <a @click="markFeedbackAsProcessed(record)">标为已处理</a>
                                    <br>
                                </template>
                                <a-popconfirm title="确认删除该反馈？" okText="是" cancelText="否"
                                              @confirm="handleDeleteFeedback(record)">
                                    <a class="delete-btn-a">删除</a>
                                </a-popconfirm>
                            </span>

                        </a-table>

                    </div>

                </div>
            </main>
        </div>
    </a-locale-provider>
</script>

@include('common-js')

@include('admin.header-js')
@include('admin.aside-js')

<script>
    var queryParams = parseUrl(location.href).params;

    var feedbackTableColumns = [
        {
            width: 60,
            title: '序号',
            dataIndex: 'num'
        },
        {
            width: 80,
            title: '状态',
            dataIndex: 'status',
        },
        {
            width: 250,
            title: '提交者',
            dataIndex: 'submitter',
            scopedSlots: {
                customRender: 'submitter'
            }
        },
        {
            width: 200,
            title: '反馈',
            dataIndex: 'feedback',
        },
        {
            width: 120,
            title: '提交时间',
            dataIndex: 'created_at',
        },
        {
            width: 200,
            title: '备注',
            dataIndex: 'remark',
            scopedSlots: {
                customRender: 'remark'
            }
        },
        {
            width: 120,
            title: '处理时间',
            dataIndex: 'processed_at',
        },
        {
            width: 100,
            title: '操作',
            dataIndex: 'operations',
            scopedSlots: {
                customRender: 'operations'
            }
        },
    ];

</script>

<script>
    var app = new Vue({
        el: '#app',
        template: '#appTemplate',
        data: {
            feedbackTableColumns,
            pageData: [],
            loadingPageData: false,

            feedbackStatus: '',
            searchKeyword: '',

            editingFeedbackRemark: '',

            asideSelectedKeys: [queryParams.aside_key],
            antdLocale: antd.locales.zh_CN,
            ...AdminHeader.data,
            ...AdminAside.data,
        },
        computed: {
            filteredFeedbacks() {
                var feedbacks = this.filterFeedbacks(this.feedbackStatus, this.searchKeyword);
                feedbacks.forEach((feedback, index) => feedback.num = index + 1);
                return feedbacks
            },
        },
        beforeMount() {
            this.loadAsideDefaultOpenKeys()
        },
        mounted() {
            this.reloadPageData();
            this.reloadAsideData()
        },
        methods: {
            statusFilter(feedback, status) {
                return status === '' || status === feedback.status;
            },

            keywordFilter(feedback, keyword) {
                keyword = keyword.trim().toLowerCase();
                if (keyword.length === 0) {
                    return true
                }
                let submitter = feedback.submitter;
                let fields = [submitter.name, submitter.prof_title, submitter.tel, submitter.work_org_name, feedback.feedback, feedback.remark];
                for (let field of fields) {
                    if (field !== null && field.toLowerCase().indexOf(keyword) !== -1) {
                        return true
                    }
                }
                return false
            },

            filterFeedbacks(status, keyword) {
                return this.pageData.filter(feedback => this.statusFilter(feedback, status) && this.keywordFilter(feedback, keyword))
            },

            countFeedbacksByStatus(status) {
                return this.filterFeedbacks(status, this.searchKeyword).length
            },

            markFeedbackAsProcessed(feedback) {
                const processed_at = moment().format('Y-MM-DD HH:mm:ss');
                axios.post('/api/db/update', {
                    model: 'Feedback',
                    records: [
                        {
                            id: feedback.id,
                            status: '已处理',
                            processed_at
                        }
                    ]
                }).then(res => {
                    if (res.data.ok) {
                        success('操作成功');
                        feedback.status = '已处理';
                        feedback.processed_at = processed_at
                    } else {
                        error('操作失败')
                    }
                })
            },

            handleDeleteFeedback(feedback) {
                axios.post('/api/db/delete', {
                    model: 'Feedback',
                    record_ids: [feedback.id]
                }).then(res => {
                    if (res.data.ok) {
                        success('删除成功');
                        var i = 0;
                        while (i < this.pageData.length) {
                            if (this.pageData[i].id === feedback.id) {
                                this.pageData.splice(i, 1);
                                while (i < this.pageData.length) {
                                    this.pageData[i].num--;
                                    i++
                                }
                                break;
                            }
                            i++
                        }
                    } else {
                        error('删除失败')
                    }
                })
            },

            handleFeedbackRemarkFocus(feedback) {
                this.editingFeedbackRemark = feedback.remark
            },

            handleFeedbackRemarkBlur(feedback) {
                if (feedback.remark !== this.editingFeedbackRemark) {
                    axios.post('/api/db/update', {
                        model: 'Feedback',
                        records: [{
                            id: feedback.id,
                            remark: feedback.remark,
                        }],
                    }).then(response => {
                        if (response.data.ok) {
                            success('备注修改成功')
                        } else {
                            error('备注修改失败')
                        }
                    })
                }
                this.editingFeedbackRemark = ''
            },

            reloadPageData() {
                this.loadingPageData = true;
                axios.get('/api/admin/get-feedbacks').then(response => {
                    this.pageData = response.data;
                    this.loadingPageData = false
                })
            },
            ...AdminHeader.methods,
            ...AdminAside.methods,
        }
    })
</script>

</body>
</html>